<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style type="text/css">
			.box{width: 100%; height: 435px; position: relative;}
.imgList{height: 435px; position: relative;}
.imgList li{position: absolute; height: 435px; left: 0; top: 0; display: none; width: 100%;
background-position: center top;
background-repeat: no-repeat;}
.imgList li a{display: block; width: 100%; height: 100%;}
.btnList{width: 120px; height: 12px; position: absolute; left: 50%; margin-left: -60px;
bottom: 15px; }
.btnList li{width: 12px; height: 12px; background: url(images/yuHua/sprite_banner.png) -17px 0;
float: left; margin-right: 24px; cursor: pointer;}
.btnList li.current{background-position: 0 0;}
.leftBtn,.rightBtn{width: 35px; height: 71px; position: absolute; top: 50%; margin-top: -35px;
background: url(images/1920/icons.png) 0 0; cursor: pointer;}
.leftBtn{left: 50%; margin-left: -600px;}
.rightBtn{left: 50%; background-position: -90px 0; margin-left: 600px;}
		</style>
	</head>

	<body>
		<div class="box">
			<ul class="imgList">
				<li style="display:block;background-color:#020612;background-image:url(imges/index/banner/1.jpg);">
					<a href="javascript:;"></a>
				</li>
				<li style="background-image:url(imges/index/banner/2.jpg);background-color:#083B74">
					<a href="javascript:;"></a>
				</li>
				<li style="background-image:url(imges/index/banner/3.jpg); background-color:#948790">
					<a href="javascript:;"></a>
				</li>
				<li style="background-image:url(imges/index/banner/4.jpg); background-color:#000F22">
					<a href="javascript:;"></a>
				</li>
			</ul>
			<ol class="btnList">
				<li class="current"></li>
				<li></li>
				<li></li>
				<li style="margin-right:0;"></li>
			</ol>
			<div class="leftBtn"></div>
			<div class="rightBtn"></div>
		</div>
		
		<script src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript">
			var num=0;
var timer;
var nextFn=function(){
    //没加之前代表上一张，上一张淡出
    $('.imgList li').eq(num).stop().fadeOut(1500);
    num++;
    if(num>3){
        num=0;
    }
    //更改完以后代表下一张，下一张淡入
    $('.imgList li').eq(num).stop().fadeIn(1500);
    $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
}
var prevFn=function(){
    //没加之前代表上一张，上一张淡出
    $('.imgList li').eq(num).stop().fadeOut(1500);
    num--;
    if(num<0){
        num=3
    }
    //更改完以后代表下一张，下一张淡入
    $('.imgList li').eq(num).stop().fadeIn(1500);
    $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
}   
//左右按钮点击
$('.rightBtn').click(nextFn);
$('.leftBtn').click(prevFn);   
//小点点击
$('.btnList li').click(function(event) {           
    var i=$(this).index();
    //现在这个全局变量num就代表上一张
    //没加之前代表上一张，上一张淡出
    $('.imgList li').eq(num).stop().fadeOut(1500);
    //再让序号和num进行同步
    num=i;
    //重新赋值以后，num就代表下一张
    //更改完以后代表下一张，下一张淡入
    $('.imgList li').eq(num).stop().fadeIn(1500);
    $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
}); 
//自动走
timer=setInterval(nextFn, 2000);
//鼠标悬停时...
$('.box').hover(function() {
    clearInterval(timer);
}, function() {
    clearInterval(timer);
    timer=setInterval(nextFn, 2000);
});
		</script>
	</body>

</html>